<template>
  <div class="detailRate">
    <div class="rateTitle">
      <span>用户评论</span>
      <span>更多 ></span>
    </div>
    <div v-if="Object.keys(detailRate).length !==0 ">
      <div class="rateHead">
        <img :src="detailRate.user !==undefined && detailRate.user.avatar" />
        <span>{{detailRate.user !==undefined && detailRate.user.uname}}</span>
      </div>
      <div class="rateComment">
        <p class="rateTxt" :title="detailRate.content">{{detailRate.content}}</p>
        <p class="rateTime">
          <span class="time">{{getTime}}</span>
          <span class="type">{{detailRate.style}}</span>
        </p>
      </div>
      <ul class="buyerImg" v-if="buyerImg !== false	? true:false ">
        <li v-for="(item,index) in buyerImg" :key="index">
          <img :src="item" alt />
        </li>
      </ul>
      <div v-show="businessReply.show" class="businessReply">{{businessReply.text}}</div>
    </div>
		<div v-else class="noComment">暂无用户评论</div>
  </div>
</template>

<script>
import { formatDate } from "common/utils.js";
export default {
  name: "DetailRate",
  props: {
    detailRate: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      buyerImg: {},
      businessReply: {}
    };
  },
  methods: {
    // 1000-1076的随机小数
    getRandom(min, max) {
      return parseInt(Math.random() * [max - min + 1] + min, 10);
    }
  },
  computed: {
    getTime() {
      return formatDate(this.detailRate.created * this.getRandom(1000, 1076));
    }
  },
  watch: {
    detailRate() {
      console.log();
      // 判断对象是否拥有某个属性  in方法 ，hasOwnProperty方法，要用call改变this使用
      // this.buyerImg ="images" in this.detailRate  //可以
      // this.buyerImg2 =this.detailRate.hasOwnProperty('images')  //报错。
      this.buyerImg = Object.prototype.hasOwnProperty.call(
        this.detailRate,
        "images"
      )
        ? this.detailRate.images
        : false;
      this.businessReply.show = "explain" in this.detailRate;
      this.businessReply.text =
        "explain" in this.detailRate ? this.detailRate.explain : "";
    }
  }
};
</script>

<style scoped>
.detailRate {
  padding: 15px 6px;
  font-size: 14px;
}
.rateTitle {
  display: flex;
  height: 30px;
  line-height: 20px;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.rateHead {
  padding: 10px 0;
}
.rateHead img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
}
.rateTxt {
  /* 文字渐变色 */
  background: linear-gradient(to right, green, red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rateTxt,
.businessReply {
  margin-bottom: 6px;
}
.rateTime {
  color: #ccc;
  font-size: 12px;
}
.rateTime .time {
  margin-right: 6px;
}
.buyerImg {
  display: flex;
}
.buyerImg li {
  flex: 1;
  margin: 10px 10px 10px 0;
  border-radius: 10px;
  overflow: hidden;
}
.buyerImg li:nth-last-child(1) {
  margin-right: 0 !important;
}

.buyerImg li img {
  width: 100%;
}
.businessReply {
  padding: 6px 12px 0px;
  line-height: 18px;
  height: 62px;
  background-color: pink;
  border-radius: 10px;
	overflow: hidden;
}

.noComment{
	padding: 10px 0;
	color: red;
}
</style>
